<template>
     <div>
      <div class="datebox">
        <div class="all" style="text-align: center;color:#fff;border: 1px solid #60b6f1;line-height:30px;width:100%">
          累计有功总电量:40.5kwh
        </div>
        <div class="minbox">
          <span style="width: 680px;height:30px;text-align:center">有功电量</span>
          <div class="panel1" id="test1"></div>
          <div class="panel2" id="test2"></div>
          <div class="panel3" id="test3"></div>
        </div>
        <div class="minbox">
          <span style="width: 680px;height:30px;text-align:center">电流</span>
          <div class="panel1" id="test4"></div>
          <div class="panel2" id="test5"></div>
          <div class="panel3" id="test6"></div>
        </div>
        <div class="minbox">
          <span style="width: 680px;height:30px;text-align:center">有功功率</span>
          <div class="panel1" id="test7"></div>
          <div class="panel2" id="test8"></div>
          <div class="panel3" id="test9"></div>
        </div> 
        <div class="minbox">
          <span style="width: 680px;height:30px;text-align:center">电压</span>
          <div class="panel1" id="test10"></div>
          <div class="panel2" id="test11"></div>
          <div class="panel3" id="test12"></div>
        </div>

      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    data() {
        return {
          myCharts: '',
          myCharts2: '',
          myCharts3:'',
          myCharts4: '',
          myCharts5: '',
          myCharts6:'',
          myCharts7: '',
          myCharts8: '',
          myCharts9:'',
          myCharts10: '',
          myCharts11: '',
          myCharts12:'',
        };
    },
    mounted() {
      this.barBtn()
    },
    methods: {
      barBtn() {
            // 实例化对象
            this.myCharts = echarts.init(document.getElementById('test1'))
            this.myCharts2 = echarts.init(document.getElementById('test2'))
            this.myCharts3 = echarts.init(document.getElementById('test3'))

            this.myCharts4 = echarts.init(document.getElementById('test4'))
            this.myCharts5 = echarts.init(document.getElementById('test5'))
            this.myCharts6 = echarts.init(document.getElementById('test6'))

            this.myCharts7 = echarts.init(document.getElementById('test7'))
            this.myCharts8 = echarts.init(document.getElementById('test8'))
            this.myCharts9 = echarts.init(document.getElementById('test9'))

            this.myCharts10 = echarts.init(document.getElementById('test10'))
            this.myCharts11 = echarts.init(document.getElementById('test11'))
            this.myCharts12 = echarts.init(document.getElementById('test12'))

            // 指定配置项和数据
            let option = {
                series: [
                {
                        min:0,
                        max:300,
                        type: 'gauge',
                        splitNumber: 6,
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18,
                                // color: [
                                //     [0.3, '#67e0e3'],
                                //     [0.7, '#37a2da'],
                                //     [1, '#fd666d']
                                // ]
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ['#2c343c', '#2c343c', '#2c343c', '#2c343c'] // 分割区域的颜色设置
                            }
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            show:true,
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kwh',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 4
                            }
                        ]
                    }
                ]
            }
            let option2 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kwh',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 7
                            }
                        ]
                    }
                ]
            }
            let option3 = {
              series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kwh',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            };
            let option4 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} A',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }
            let option5 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} A',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }
            let option6 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} A',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }

            let option7 = {
                series: [
                {
                        min:0,
                        max:300,
                        type: 'gauge',
                        splitNumber: 6,
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kw',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }
            let option8 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kw',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 12
                            }
                        ]
                    }
                ]
            }
            let option9 = {
              series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} kw',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 16
                            }
                        ]
                    }
                ]
            };
            let option10 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} V',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }
            let option11 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} V',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 0
                            }
                        ]
                    }
                ]
            }
            let option12 = {
                series: [
                    {
                        min:0,
                        max:20,
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 18
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 5,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 20,
                            color: '#999',
                            fontSize: 12
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 12,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 15,
                            formatter: '{value} V',
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 10
                            }
                        ]
                    }
                ]
            }
            // 把配置项给实例对象
            this.myCharts.setOption(option)
            // 让图表跟随屏幕自动的去适应
            window.addEventListener('resize', function () {
                if (this.myChart) this.myCharts.resize()
            })
            this.myCharts2.setOption(option2)
            window.addEventListener('resize', function () {
                if (this.myChart2) myCharts2.resize()
            })
            this.myCharts3.setOption(option3)
            window.addEventListener('resize', function () {
                if (this.myChart3) myCharts3.resize()
            })

            this.myCharts4.setOption(option4)
            window.addEventListener('resize', function () {
                if (this.myChart4) myCharts4.resize()
            })
            this.myCharts5.setOption(option5)
            window.addEventListener('resize', function () {
                if (this.myChart5) myCharts5.resize()
            })
            this.myCharts6.setOption(option6)
            window.addEventListener('resize', function () {
                if (this.myChart6) myCharts6.resize()
            })

            this.myCharts7.setOption(option7)
            window.addEventListener('resize', function () {
                if (this.myChart7) myCharts7.resize()
            })
            this.myCharts8.setOption(option8)
            window.addEventListener('resize', function () {
                if (this.myChart8) myCharts8.resize()
            })
            this.myCharts9.setOption(option9)
            window.addEventListener('resize', function () {
                if (this.myChart9) myCharts9.resize()
            })

            this.myCharts10.setOption(option10)
            window.addEventListener('resize', function () {
                if (this.myChart10) myCharts10.resize()
            })
            this.myCharts11.setOption(option11)
            window.addEventListener('resize', function () {
                if (this.myChart11) myCharts11.resize()
            })
            this.myCharts12.setOption(option12)
            window.addEventListener('resize', function () {
                if (this.myChart12) myCharts12.resize()
            })
        },

    },
};
</script>

<style scoped>
.panel1 {
  margin-top: 30px;
    width: 200px;
    height: 200px;
}

.panel2 {
  margin-top: 30px;

    width: 200px;
    height: 200px;
}
.panel3 {
    margin-top: 30px;
    width: 200px;
    height: 200px;
}
.minbox{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  /* margin-left: 20px; */
  text-align: center; 
  color: #fff;
  border: 1px solid #60b6f1;
  width: 780px;
  height: 300px;
}

.datebox{
  width: 1580px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* align-items: center; */
  border: 1px solid black;
  height: 800px;
}
</style>
